<template>
  <view class="map-container">
    <map id="map" longitude="113.324520" latitude="23.099994" scale="16" @regionchange="onRegionChange">
    </map>
  </view>
</template>

<script>
export default {
  props: {
    markers: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      mapCtx: null,
      latitude: 23.099994,
      longitude: 113.324520
    };
  },
  methods: {
    onReady(e) {
      this.mapCtx = e.component.mapContext;
      this.mapCtx.getCenterLocation((res) => {
        this.latitude = res.latitude;
        this.longitude = res.longitude;
      });
    },
    onRegionChange(e) {
      this.latitude = e.latitude;
      this.longitude = e.longitude;
    },
    setMarker() {
      const marker = {
        id: 1,
        latitude: this.latitude,
        longitude: this.longitude,
        width: 50,
        height: 50
      };
      this.mapCtx.addMarker({
        marker,
        success: () => {
          this.mapCtx.moveToLocation();
        }
      });
    }
  },
  mounted() {
    this.setMarker();
  }
};
</script>

<style>
.map-container {
  width: 100%;
  height: 100%;
}
</style>